import { useRoute } from 'vue-router'
import { getGoodsDetail } from '@/apis/goods'
import { onMounted, ref, watch } from 'vue'

export function useGoodsDetail() {
  const route = useRoute()
  const goodsId = ref('')
  const goodsDetailInfo = ref()
  onMounted(async () => {
    if (!goodsId.value) {
      goodsId.value = route.params.id
      goodsDetailInfo.value = await getGoodsDetail(goodsId.value)
    }
  })
  watch(
    () => route.params.id,
    async (newId, oldId) => {
      goodsId.value = newId
      goodsDetailInfo.value = await getGoodsDetail(newId)
    },
  )
  return {
    goodsDetailInfo,
    goodsId,
  }
}
